<!doctype html>
<html lang="zh-CN">
<head>

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    
    <meta name="referrer" content="no-referrer-when-downgrade">
    

    <title>前端编码安全 | Anttu&#39;s Blog</title>
    <meta property="og:title" content="前端编码安全 - Anttu&#39;s Blog">
    <meta property="og:type" content="article">
        
    <meta property="article:published_time" content='2021-10-07T00:29:47&#43;08:00'>
        
        
    <meta property="article:modified_time" content='2021-10-07T00:29:47&#43;08:00'>
        
    <meta name="Keywords" content="golang,go语言,go语言笔记,anttu,java,博客,bash,linux笔记,python笔记,公众号,小程序">
    <meta name="description" content="前端编码安全">
        
    <meta name="author" content="Anttu">
    <meta property="og:url" content="https://anttu.gitee.io/post/2021-10-07-safe_coding_js/">
    <link rel="shortcut icon" href='/favicon.ico'  type="image/x-icon">

    <link rel="stylesheet" href='/css/normalize.css'>
    <link rel="stylesheet" href='/css/style.css'>
    <script type="text/javascript" src="//cdn.bootcdn.net/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

    
    
    
    
    
    
        <link rel="stylesheet" href='/css/asciinema-player.css'>
    
</head>


<body>
    <header id="header" class="clearfix">
    <div class="container">
        <div class="col-group">
            <div class="site-name ">
                
                    <a id="logo" href="https://anttu.gitee.io/">
                        Anttu&#39;s Blog
                    </a>
                
                <p class="description">一位Java开发者，喜欢研究技术，同时也在学习Golang和Python中，对服务器、Linux使用比较熟悉。欢迎添加技术交流QQ群：655158296</p>
            </div>
            <div>
                <nav id="nav-menu" class="clearfix">
                    <a class="current" href="https://anttu.gitee.io/">首页</a>
                    
                    <a  href="https://anttu.gitee.io/archives/" title="归档">归档</a>
                    
                    <a  href="https://anttu.gitee.io/tags/" title="分类">分类</a>
                    
                    <a  href="https://anttu.gitee.io/about/" title="关于">关于</a>
                    
                </nav>
            </div>
        </div>
    </div>
</header>

    <div id="body">
        <div class="container">
            <div class="col-group">

                <div class="col-8" id="main">
                    
<div class="res-cons">
    <style type="text/css">
    .post-toc {
        position: fixed;
        width: 200px;
        margin-left: -210px;
        padding: 5px 10px;
        font-family: Athelas, STHeiti, Microsoft Yahei, serif;
        font-size: 12px;
        border: 1px solid rgba(0, 0, 0, .07);
        border-radius: 5px;
        background-color: rgba(255, 255, 255, 0.98);
        background-clip: padding-box;
        -webkit-box-shadow: 1px 1px 2px rgba(0, 0, 0, .125);
        box-shadow: 1px 1px 2px rgba(0, 0, 0, .125);
        word-wrap: break-word;
        white-space: nowrap;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        z-index: 999;
        cursor: pointer;
        max-height: 70%;
        overflow-y: auto;
        overflow-x: hidden;
    }

    .post-toc .post-toc-title {
        width: 100%;
        margin: 0 auto;
        font-size: 20px;
        font-weight: 400;
        text-transform: uppercase;
        text-align: center;
    }

    .post-toc .post-toc-content {
        font-size: 15px;
    }

    .post-toc .post-toc-content>nav>ul {
        margin: 10px 0;
    }

    .post-toc .post-toc-content ul {
        padding-left: 20px;
        list-style: square;
        margin: 0.5em;
        line-height: 1.8em;
    }

    .post-toc .post-toc-content ul ul {
        padding-left: 15px;
        display: none;
    }

    @media print,
    screen and (max-width:1057px) {
        .post-toc {
            display: none;
        }
    }
</style>
<div class="post-toc" style="position: absolute; top: 188px;">
    <h2 class="post-toc-title">文章目录</h2>
    <div class="post-toc-content">
        <nav id="TableOfContents">
  <ul>
    <li>
      <ul>
        <li></li>
      </ul>
    </li>
  </ul>

  <ul>
    <li><a href="#11-原生dom-api的安全操作">1.1 原生DOM API的安全操作</a></li>
    <li><a href="#12-流行框架库的安全操作">1.2 流行框架/库的安全操作</a></li>
    <li><a href="#13-页面重定向">1.3 页面重定向</a></li>
    <li><a href="#14-json解析动态执行">1.4 JSON解析/动态执行</a></li>
    <li><a href="#15-跨域通讯">1.5 跨域通讯</a></li>
  </ul>

  <ul>
    <li><a href="#21-敏感配置信息">2.1 敏感/配置信息</a></li>
    <li><a href="#22-第三方组件资源">2.2 第三方组件/资源</a></li>
    <li><a href="#23-纵深安全防护">2.3 纵深安全防护</a></li>
  </ul>
</nav>
    </div>
</div>
<script type="text/javascript">
    $(document).ready(function () {
        var postToc = $(".post-toc");
        if (postToc.length) {
            var leftPos = $("#main").offset().left;
            if (leftPos < 220) {
                postToc.css({ "width": leftPos - 10, "margin-left": (0 - leftPos) })
            }

            var t = postToc.offset().top - 20,
                a = {
                    start: {
                        position: "absolute",
                        top: t
                    },
                    process: {
                        position: "fixed",
                        top: 20
                    },
                };
            $(window).scroll(function () {
                var e = $(window).scrollTop();
                e < t ? postToc.css(a.start) : postToc.css(a.process)
            })
        }

        if ($("#TableOfContents").children().length < 1) {
            $(".post-toc").remove();
        }
    })
</script>
    <article class="post">
        <header>
            <h1 class="post-title">前端编码安全</h1>
        </header>
        <date class="post-meta meta-date">
            2021年10月7日
        </date>
        
        <div class="post-meta">
            <span>|</span>
            
            <span class="meta-category">
                <a href='/categories/%E5%89%8D%E7%AB%AF' target="_blank">前端</a>
            </span>
            
            <span class="meta-category">
                <a href='/categories/safe' target="_blank">safe</a>
            </span>
            
        </div>
        
        
        <div class="post-meta">
            <span id="busuanzi_container_page_pv">|<span id="busuanzi_value_page_pv"></span><span>
                    阅读</span></span>
        </div>
        
        
        <div class="clear" style="display: none">
            <div class="toc-article">
                <div class="toc-title">文章目录</div>
            </div>
        </div>
        
        <div class="post-content">
            <h5 id="前端js开发--------转自腾讯github">前端js开发     &ndash; 转自腾讯github</h5>
<p><a id="1.1"></a></p>
<h1 id="i-代码实现">I. 代码实现</h1>
<p><a id="1.1.1"></a></p>
<h2 id="11-原生dom-api的安全操作">1.1 原生DOM API的安全操作</h2>
<p><strong>1.1.1【必须】HTML标签操作，限定/过滤传入变量值</strong></p>
<ul>
<li>使用<code>innerHTML=</code>、<code>outerHTML=</code>、<code>document.write()</code>、<code>document.writeln()</code>时，如变量值外部可控，应对特殊字符（<code>&amp;, &lt;, &gt;, &quot;, '</code>）做编码转义，或使用安全的DOM API替代，包括：<code>innerText=</code></li>
</ul>
<div class="highlight"><div style="background-color:#fff;-moz-tab-size:4;-o-tab-size:4;tab-size:4;">
<table style="border-spacing:0;padding:0;margin:0;border:0;"><tr><td style="vertical-align:top;padding:0;margin:0;border:0;">
<pre tabindex="0" style="background-color:#fff;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code><span style="white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 1
</span><span style="white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 2
</span><span style="white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 3
</span><span style="white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 4
</span><span style="white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 5
</span><span style="white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 6
</span><span style="white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 7
</span><span style="white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 8
</span><span style="white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 9
</span><span style="white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">10
</span><span style="white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">11
</span><span style="white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">12
</span><span style="white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">13
</span><span style="white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">14
</span><span style="white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">15
</span><span style="white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">16
</span><span style="white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">17
</span><span style="white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">18
</span><span style="white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">19
</span><span style="white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">20
</span><span style="white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">21
</span><span style="white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">22
</span><span style="white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">23
</span><span style="white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">24
</span><span style="white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">25
</span><span style="white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">26
</span></code></pre></td>
<td style="vertical-align:top;padding:0;margin:0;border:0;;width:100%">
<pre tabindex="0" style="background-color:#fff;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-javascript" data-lang="javascript"><span style="display:flex;"><span><span style="color:#998;font-style:italic">// 假设 params 为用户输入， text 为 DOM 节点
</span></span></span><span style="display:flex;"><span><span style="color:#998;font-style:italic">// bad：将不可信内容带入HTML标签操作
</span></span></span><span style="display:flex;"><span><span style="color:#998;font-style:italic"></span><span style="color:#000;font-weight:bold">const</span> { user } <span style="color:#000;font-weight:bold">=</span> params;
</span></span><span style="display:flex;"><span><span style="color:#998;font-style:italic">// ...
</span></span></span><span style="display:flex;"><span><span style="color:#998;font-style:italic"></span>text.innerHTML <span style="color:#000;font-weight:bold">=</span> <span style="color:#d14">`Follow @</span><span style="color:#d14">${</span>user<span style="color:#d14">}</span><span style="color:#d14">`</span>;
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span><span style="color:#998;font-style:italic">// good: innerHTML操作前，对特殊字符编码转义
</span></span></span><span style="display:flex;"><span><span style="color:#998;font-style:italic"></span><span style="color:#000;font-weight:bold">function</span> htmlEncode(iStr) {
</span></span><span style="display:flex;"><span>	<span style="color:#000;font-weight:bold">let</span> sStr <span style="color:#000;font-weight:bold">=</span> iStr;
</span></span><span style="display:flex;"><span>	sStr <span style="color:#000;font-weight:bold">=</span> sStr.replace(<span style="color:#009926">/&amp;/g</span>, <span style="color:#d14">&#34;&amp;amp;&#34;</span>);
</span></span><span style="display:flex;"><span>	sStr <span style="color:#000;font-weight:bold">=</span> sStr.replace(<span style="color:#009926">/&gt;/g</span>, <span style="color:#d14">&#34;&amp;gt;&#34;</span>);
</span></span><span style="display:flex;"><span>	sStr <span style="color:#000;font-weight:bold">=</span> sStr.replace(<span style="color:#009926">/&lt;/g</span>, <span style="color:#d14">&#34;&amp;lt;&#34;</span>);
</span></span><span style="display:flex;"><span>	sStr <span style="color:#000;font-weight:bold">=</span> sStr.replace(<span style="color:#009926">/&#34;/g</span>, <span style="color:#d14">&#34;&amp;quot;&#34;</span>);
</span></span><span style="display:flex;"><span>	sStr <span style="color:#000;font-weight:bold">=</span> sStr.replace(<span style="color:#009926">/&#39;/g</span>, <span style="color:#d14">&#34;&amp;#39;&#34;</span>);
</span></span><span style="display:flex;"><span>	<span style="color:#000;font-weight:bold">return</span> sStr;
</span></span><span style="display:flex;"><span>}
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span><span style="color:#000;font-weight:bold">let</span> { user } <span style="color:#000;font-weight:bold">=</span> params;
</span></span><span style="display:flex;"><span>user <span style="color:#000;font-weight:bold">=</span> htmlEncode(user);
</span></span><span style="display:flex;"><span><span style="color:#998;font-style:italic">// ...
</span></span></span><span style="display:flex;"><span><span style="color:#998;font-style:italic"></span>text.innerHTML <span style="color:#000;font-weight:bold">=</span> <span style="color:#d14">`Follow @</span><span style="color:#d14">${</span>user<span style="color:#d14">}</span><span style="color:#d14">`</span>;
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span><span style="color:#998;font-style:italic">// good: 使用安全的DOM API替代innerHTML
</span></span></span><span style="display:flex;"><span><span style="color:#998;font-style:italic"></span><span style="color:#000;font-weight:bold">const</span> { user } <span style="color:#000;font-weight:bold">=</span> params;
</span></span><span style="display:flex;"><span><span style="color:#998;font-style:italic">// ...
</span></span></span><span style="display:flex;"><span><span style="color:#998;font-style:italic"></span>text.innerText <span style="color:#000;font-weight:bold">=</span> <span style="color:#d14">`Follow @</span><span style="color:#d14">${</span>user<span style="color:#d14">}</span><span style="color:#d14">`</span>;
</span></span></code></pre></td></tr></table>
</div>
</div><p><strong>1.1.2【必须】HTML属性操作，限定/过滤传入变量值</strong></p>
<ul>
<li>
<p>使用<code>element.setAttribute(name, value);</code>时，如第一个参数值<code>name</code>外部可控，应用白名单限定允许操作的属性范围。</p>
</li>
<li>
<p>使用<code>element.setAttribute(name, value);</code>时，操作<code>a.href</code>、<code>ifame.src</code>、<code>form.action</code>、<code>embed.src</code>、<code>object.data</code>、<code>link.href</code>、<code>area.href</code>、<code>input.formaction</code>、<code>button.formaction</code>属性时，如第二个参数值<code>value</code>外部可控，应参考<em>JavaScript页面类规范1.3.1</em>部分，限定页面重定向或引入资源的目标地址。</p>
</li>
</ul>
<div class="highlight"><div style="background-color:#fff;-moz-tab-size:4;-o-tab-size:4;tab-size:4;">
<table style="border-spacing:0;padding:0;margin:0;border:0;"><tr><td style="vertical-align:top;padding:0;margin:0;border:0;">
<pre tabindex="0" style="background-color:#fff;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code><span style="white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 1
</span><span style="white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 2
</span><span style="white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 3
</span><span style="white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 4
</span><span style="white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 5
</span><span style="white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 6
</span><span style="white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 7
</span><span style="white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 8
</span><span style="white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 9
</span><span style="white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">10
</span><span style="white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">11
</span><span style="white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">12
</span><span style="white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">13
</span><span style="white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">14
</span><span style="white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">15
</span><span style="white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">16
</span><span style="white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">17
</span></code></pre></td>
<td style="vertical-align:top;padding:0;margin:0;border:0;;width:100%">
<pre tabindex="0" style="background-color:#fff;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-javascript" data-lang="javascript"><span style="display:flex;"><span><span style="color:#998;font-style:italic">// good: setAttribute操作前，限定引入资源的目标地址
</span></span></span><span style="display:flex;"><span><span style="color:#998;font-style:italic"></span><span style="color:#000;font-weight:bold">function</span> addExternalCss(e) {
</span></span><span style="display:flex;"><span>	<span style="color:#000;font-weight:bold">const</span> t <span style="color:#000;font-weight:bold">=</span> <span style="color:#0086b3">document</span>.createElement(<span style="color:#d14">&#39;link&#39;</span>);
</span></span><span style="display:flex;"><span>	t.setAttribute(<span style="color:#d14">&#39;href&#39;</span>, e),
</span></span><span style="display:flex;"><span>	t.setAttribute(<span style="color:#d14">&#39;rel&#39;</span>, <span style="color:#d14">&#39;stylesheet&#39;</span>),
</span></span><span style="display:flex;"><span>	t.setAttribute(<span style="color:#d14">&#39;type&#39;</span>, <span style="color:#d14">&#39;text/css&#39;</span>),
</span></span><span style="display:flex;"><span>	<span style="color:#0086b3">document</span>.head.appendChild(t)
</span></span><span style="display:flex;"><span>}
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span><span style="color:#000;font-weight:bold">function</span> validURL(sUrl) {
</span></span><span style="display:flex;"><span>    <span style="color:#000;font-weight:bold">return</span> <span style="color:#000;font-weight:bold">!!</span>((<span style="color:#009926">/^(https?:\/\/)?[\w\-.]+\.(qq|tencent)\.com($|\/|\\)/i</span>).test(sUrl) <span style="color:#000;font-weight:bold">||</span> (<span style="color:#009926">/^[\w][\w/.\-_%]+$/i</span>).test(sUrl) <span style="color:#000;font-weight:bold">||</span> (<span style="color:#009926">/^[/\\][^/\\]/i</span>).test(sUrl));
</span></span><span style="display:flex;"><span>}
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span><span style="color:#000;font-weight:bold">let</span> sUrl <span style="color:#000;font-weight:bold">=</span> <span style="color:#d14">&#34;https://evil.com/1.css&#34;</span>
</span></span><span style="display:flex;"><span><span style="color:#000;font-weight:bold">if</span> (validURL(sUrl)) {
</span></span><span style="display:flex;"><span>	addExternalCss(sUrl);
</span></span><span style="display:flex;"><span>}
</span></span></code></pre></td></tr></table>
</div>
</div><p><a id="1.1.2"></a></p>
<h2 id="12-流行框架库的安全操作">1.2 流行框架/库的安全操作</h2>
<p><strong>1.2.1【必须】限定/过滤传入jQuery不安全函数的变量值</strong></p>
<ul>
<li>使用<code>.html()</code>、<code>.append()</code>、<code>.prepend()</code>、<code>.wrap()</code>、<code>.replaceWith()</code>、<code>.wrapAll()</code>、<code>.wrapInner()</code>、<code>.after()</code>、<code>.before()</code>时，如变量值外部可控，应对特殊字符（<code>&amp;, &lt;, &gt;, &quot;, '</code>）做编码转义。</li>
<li>引入<code>jQuery 1.x（等于或低于1.12）、jQuery2.x（等于或低于2.2）</code>，且使用<code>$()</code>时，应优先考虑替换为最新版本。如一定需要使用，应对传入参数值中的特殊字符（<code>&amp;, &lt;, &gt;, &quot;, '</code>）做编码转义。</li>
</ul>
<div class="highlight"><div style="background-color:#fff;-moz-tab-size:4;-o-tab-size:4;tab-size:4;">
<table style="border-spacing:0;padding:0;margin:0;border:0;"><tr><td style="vertical-align:top;padding:0;margin:0;border:0;">
<pre tabindex="0" style="background-color:#fff;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code><span style="white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 1
</span><span style="white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 2
</span><span style="white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 3
</span><span style="white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 4
</span><span style="white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 5
</span><span style="white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 6
</span><span style="white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 7
</span><span style="white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 8
</span><span style="white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 9
</span><span style="white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">10
</span><span style="white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">11
</span><span style="white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">12
</span><span style="white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">13
</span><span style="white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">14
</span><span style="white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">15
</span><span style="white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">16
</span><span style="white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">17
</span><span style="white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">18
</span><span style="white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">19
</span><span style="white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">20
</span></code></pre></td>
<td style="vertical-align:top;padding:0;margin:0;border:0;;width:100%">
<pre tabindex="0" style="background-color:#fff;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-javascript" data-lang="javascript"><span style="display:flex;"><span><span style="color:#998;font-style:italic">// bad：将不可信内容，带入jQuery不安全函数.after()操作
</span></span></span><span style="display:flex;"><span><span style="color:#998;font-style:italic"></span><span style="color:#000;font-weight:bold">const</span> { user } <span style="color:#000;font-weight:bold">=</span> params;
</span></span><span style="display:flex;"><span><span style="color:#998;font-style:italic">// ...
</span></span></span><span style="display:flex;"><span><span style="color:#998;font-style:italic"></span>$(<span style="color:#d14">&#34;p&#34;</span>).after(user);
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span><span style="color:#998;font-style:italic">// good: jQuery不安全函数.html()操作前，对特殊字符编码转义
</span></span></span><span style="display:flex;"><span><span style="color:#998;font-style:italic"></span><span style="color:#000;font-weight:bold">function</span> htmlEncode(iStr) {
</span></span><span style="display:flex;"><span>	<span style="color:#000;font-weight:bold">let</span> sStr <span style="color:#000;font-weight:bold">=</span> iStr;
</span></span><span style="display:flex;"><span>	sStr <span style="color:#000;font-weight:bold">=</span> sStr.replace(<span style="color:#009926">/&amp;/g</span>, <span style="color:#d14">&#34;&amp;amp;&#34;</span>);
</span></span><span style="display:flex;"><span>	sStr <span style="color:#000;font-weight:bold">=</span> sStr.replace(<span style="color:#009926">/&gt;/g</span>, <span style="color:#d14">&#34;&amp;gt;&#34;</span>);
</span></span><span style="display:flex;"><span>	sStr <span style="color:#000;font-weight:bold">=</span> sStr.replace(<span style="color:#009926">/&lt;/g</span>, <span style="color:#d14">&#34;&amp;lt;&#34;</span>);
</span></span><span style="display:flex;"><span>	sStr <span style="color:#000;font-weight:bold">=</span> sStr.replace(<span style="color:#009926">/&#34;/g</span>, <span style="color:#d14">&#34;&amp;quot;&#34;</span>);
</span></span><span style="display:flex;"><span>	sStr <span style="color:#000;font-weight:bold">=</span> sStr.replace(<span style="color:#009926">/&#39;/g</span>, <span style="color:#d14">&#34;&amp;#39;&#34;</span>);
</span></span><span style="display:flex;"><span>	<span style="color:#000;font-weight:bold">return</span> sStr;
</span></span><span style="display:flex;"><span>}
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span><span style="color:#998;font-style:italic">// const user = params.user;
</span></span></span><span style="display:flex;"><span><span style="color:#998;font-style:italic"></span>user <span style="color:#000;font-weight:bold">=</span> htmlEncode(user);
</span></span><span style="display:flex;"><span><span style="color:#998;font-style:italic">// ...
</span></span></span><span style="display:flex;"><span><span style="color:#998;font-style:italic"></span>$(<span style="color:#d14">&#34;p&#34;</span>).html(user);
</span></span></code></pre></td></tr></table>
</div>
</div><ul>
<li>
<p>使用<code>.attr()</code>操作<code>a.href</code>、<code>ifame.src</code>、<code>form.action</code>、<code>embed.src</code>、<code>object.data</code>、<code>link.href</code>、<code>area.href</code>、<code>input.formaction</code>、<code>button.formaction</code>属性时，应参考<em>JavaScript页面类规范1.3.1</em>部分，限定重定向的资源目标地址。</p>
</li>
<li>
<p>使用<code>.attr(attributeName, value)</code>时，如第一个参数值<code>attributeName</code>外部可控，应用白名单限定允许操作的属性范围。</p>
</li>
<li>
<p>使用<code>$.getScript(url [, success ])</code>时，如第一个参数值<code>url</code>外部可控（如：从URL取值拼接，请求jsonp接口），应限定可控变量值的字符集范围为：<code>[a-zA-Z0-9_-]+</code>。</p>
</li>
</ul>
<p><strong>1.2.2【必须】限定/过滤传入Vue.js不安全函数的变量值</strong></p>
<ul>
<li>使用<code>v-html</code>时，不允许对用户提供的内容使用HTML插值。如业务需要，应先对不可信内容做富文本过滤。</li>
</ul>
<div class="highlight"><div style="background-color:#fff;-moz-tab-size:4;-o-tab-size:4;tab-size:4;">
<table style="border-spacing:0;padding:0;margin:0;border:0;"><tr><td style="vertical-align:top;padding:0;margin:0;border:0;">
<pre tabindex="0" style="background-color:#fff;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code><span style="white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 1
</span><span style="white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 2
</span><span style="white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 3
</span><span style="white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 4
</span><span style="white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 5
</span><span style="white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 6
</span><span style="white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 7
</span><span style="white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 8
</span><span style="white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 9
</span><span style="white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">10
</span><span style="white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">11
</span><span style="white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">12
</span><span style="white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">13
</span><span style="white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">14
</span><span style="white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">15
</span><span style="white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">16
</span><span style="white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">17
</span><span style="white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">18
</span><span style="white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">19
</span><span style="white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">20
</span><span style="white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">21
</span><span style="white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">22
</span><span style="white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">23
</span></code></pre></td>
<td style="vertical-align:top;padding:0;margin:0;border:0;;width:100%">
<pre tabindex="0" style="background-color:#fff;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-html" data-lang="html"><span style="display:flex;"><span>// bad：直接渲染外部传入的不可信内容
</span></span><span style="display:flex;"><span>&lt;<span style="color:#000080">div</span> <span style="color:#008080">v-html</span><span style="color:#000;font-weight:bold">=</span><span style="color:#d14">&#34;userProvidedHtml&#34;</span>&gt;&lt;/<span style="color:#000080">div</span>&gt;
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span>// good：使用富文本过滤库处理不可信内容后渲染
</span></span><span style="display:flex;"><span><span style="color:#998;font-style:italic">&lt;!-- 使用 --&gt;</span>
</span></span><span style="display:flex;"><span>&lt;<span style="color:#000080">div</span> <span style="color:#008080">v-xss-html</span><span style="color:#000;font-weight:bold">=</span><span style="color:#d14">&#34;{&#39;mode&#39;: &#39;whitelist&#39;, dirty: html, options: options}&#34;</span> &gt;&lt;/<span style="color:#000080">div</span>&gt;
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span><span style="color:#998;font-style:italic">&lt;!-- 配置 --&gt;</span>
</span></span><span style="display:flex;"><span>&lt;<span style="color:#000080">script</span>&gt;
</span></span><span style="display:flex;"><span>	<span style="color:#000;font-weight:bold">new</span> Vue({
</span></span><span style="display:flex;"><span>	el<span style="color:#000;font-weight:bold">:</span> <span style="color:#d14">&#34;#app&#34;</span>,
</span></span><span style="display:flex;"><span>	data<span style="color:#000;font-weight:bold">:</span> {
</span></span><span style="display:flex;"><span>		options<span style="color:#000;font-weight:bold">:</span> {
</span></span><span style="display:flex;"><span>			whiteList<span style="color:#000;font-weight:bold">:</span> {
</span></span><span style="display:flex;"><span>				a<span style="color:#000;font-weight:bold">:</span> [<span style="color:#d14">&#34;href&#34;</span>, <span style="color:#d14">&#34;title&#34;</span>, <span style="color:#d14">&#34;target&#34;</span>, <span style="color:#d14">&#34;class&#34;</span>, <span style="color:#d14">&#34;id&#34;</span>],
</span></span><span style="display:flex;"><span>				div<span style="color:#000;font-weight:bold">:</span> [<span style="color:#d14">&#34;class&#34;</span>, <span style="color:#d14">&#34;id&#34;</span>],
</span></span><span style="display:flex;"><span>				span<span style="color:#000;font-weight:bold">:</span> [<span style="color:#d14">&#34;class&#34;</span>, <span style="color:#d14">&#34;id&#34;</span>],
</span></span><span style="display:flex;"><span>				img<span style="color:#000;font-weight:bold">:</span> [<span style="color:#d14">&#34;src&#34;</span>, <span style="color:#d14">&#34;alt&#34;</span>],
</span></span><span style="display:flex;"><span>			},
</span></span><span style="display:flex;"><span>		},
</span></span><span style="display:flex;"><span>	},
</span></span><span style="display:flex;"><span>});
</span></span><span style="display:flex;"><span>&lt;/<span style="color:#000080">script</span>&gt;
</span></span></code></pre></td></tr></table>
</div>
</div><ul>
<li>
<p>使用<code>v-bind</code>操作<code>a.href</code>、<code>ifame.src</code>、<code>form.action</code>、<code>embed.src</code>、<code>object.data</code>、<code>link.href</code>、<code>area.href</code>、<code>input.formaction</code>、<code>button.formaction</code>时，应确保后端已参考<em>JavaScript页面类规范1.3.1</em>部分，限定了供前端调用的重定向目标地址。</p>
</li>
<li>
<p>使用<code>v-bind</code>操作<code>style</code>属性时，应只允许外部控制特定、可控的CSS属性值</p>
</li>
</ul>
<div class="highlight"><div style="background-color:#fff;-moz-tab-size:4;-o-tab-size:4;tab-size:4;">
<table style="border-spacing:0;padding:0;margin:0;border:0;"><tr><td style="vertical-align:top;padding:0;margin:0;border:0;">
<pre tabindex="0" style="background-color:#fff;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code><span style="white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 1
</span><span style="white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 2
</span><span style="white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 3
</span><span style="white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 4
</span><span style="white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 5
</span><span style="white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 6
</span><span style="white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 7
</span><span style="white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 8
</span><span style="white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 9
</span><span style="white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">10
</span><span style="white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">11
</span><span style="white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">12
</span></code></pre></td>
<td style="vertical-align:top;padding:0;margin:0;border:0;;width:100%">
<pre tabindex="0" style="background-color:#fff;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-html" data-lang="html"><span style="display:flex;"><span>// bad：v-bind允许外部可控值，自定义CSS属性及数值
</span></span><span style="display:flex;"><span>&lt;<span style="color:#000080">a</span> <span style="color:#008080">v-bind:href</span><span style="color:#000;font-weight:bold">=</span><span style="color:#d14">&#34;sanitizedUrl&#34;</span> <span style="color:#008080">v-bind:style</span><span style="color:#000;font-weight:bold">=</span><span style="color:#d14">&#34;userProvidedStyles&#34;</span>&gt;
</span></span><span style="display:flex;"><span>click me
</span></span><span style="display:flex;"><span>&lt;/<span style="color:#000080">a</span>&gt;
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span>// good：v-bind只允许外部提供特性、可控的CSS属性值
</span></span><span style="display:flex;"><span>&lt;<span style="color:#000080">a</span> <span style="color:#008080">v-bind:href</span><span style="color:#000;font-weight:bold">=</span><span style="color:#d14">&#34;sanitizedUrl&#34;</span> <span style="color:#008080">v-bind:style</span><span style="color:#000;font-weight:bold">=</span><span style="color:#d14">&#34;{
</span></span></span><span style="display:flex;"><span><span style="color:#d14">color: userProvidedColor,
</span></span></span><span style="display:flex;"><span><span style="color:#d14">background: userProvidedBackground
</span></span></span><span style="display:flex;"><span><span style="color:#d14">}&#34;</span> &gt;
</span></span><span style="display:flex;"><span>click me
</span></span><span style="display:flex;"><span>&lt;/<span style="color:#000080">a</span>&gt;
</span></span></code></pre></td></tr></table>
</div>
</div><p><a id="1.1.3"></a></p>
<h2 id="13-页面重定向">1.3 页面重定向</h2>
<p><strong>1.3.1【必须】限定跳转目标地址</strong></p>
<ul>
<li>
<p>使用白名单，限定重定向地址的协议前缀（默认只允许HTTP、HTTPS）、域名（默认只允许公司根域），或指定为固定值；</p>
</li>
<li>
<p>适用场景包括，使用函数方法：<code>location.href</code>、<code>window.open()</code>、<code>location.assign()</code>、<code>location.replace()</code>；赋值或更新HTML属性：<code>a.href</code>、<code>ifame.src</code>、<code>form.action</code>、<code>embed.src</code>、<code>object.data</code>、<code>link.href</code>、<code>area.href</code>、<code>input.formaction</code>、<code>button.formaction</code>；</p>
</li>
</ul>
<div class="highlight"><div style="background-color:#fff;-moz-tab-size:4;-o-tab-size:4;tab-size:4;">
<table style="border-spacing:0;padding:0;margin:0;border:0;"><tr><td style="vertical-align:top;padding:0;margin:0;border:0;">
<pre tabindex="0" style="background-color:#fff;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code><span style="white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 1
</span><span style="white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 2
</span><span style="white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 3
</span><span style="white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 4
</span><span style="white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 5
</span><span style="white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 6
</span><span style="white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 7
</span><span style="white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 8
</span><span style="white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 9
</span><span style="white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">10
</span><span style="white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">11
</span><span style="white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">12
</span><span style="white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">13
</span><span style="white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">14
</span><span style="white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">15
</span><span style="white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">16
</span><span style="white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">17
</span></code></pre></td>
<td style="vertical-align:top;padding:0;margin:0;border:0;;width:100%">
<pre tabindex="0" style="background-color:#fff;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-javascript" data-lang="javascript"><span style="display:flex;"><span><span style="color:#998;font-style:italic">// bad: 跳转至外部可控的不可信地址
</span></span></span><span style="display:flex;"><span><span style="color:#998;font-style:italic"></span><span style="color:#000;font-weight:bold">const</span> sTargetUrl <span style="color:#000;font-weight:bold">=</span> getURLParam(<span style="color:#d14">&#34;target&#34;</span>);
</span></span><span style="display:flex;"><span>location.replace(sTargetUrl);
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span><span style="color:#998;font-style:italic">// good: 白名单限定重定向地址
</span></span></span><span style="display:flex;"><span><span style="color:#998;font-style:italic"></span><span style="color:#000;font-weight:bold">function</span> validURL(sUrl) {
</span></span><span style="display:flex;"><span>	<span style="color:#000;font-weight:bold">return</span> <span style="color:#000;font-weight:bold">!!</span>((<span style="color:#009926">/^(https?:\/\/)?[\w\-.]+\.(qq|tencent)\.com($|\/|\\)/i</span>).test(sUrl) <span style="color:#000;font-weight:bold">||</span> (<span style="color:#009926">/^[\w][\w/.\-_%]+$/i</span>).test(sUrl) <span style="color:#000;font-weight:bold">||</span> (<span style="color:#009926">/^[/\\][^/\\]/i</span>).test(sUrl));
</span></span><span style="display:flex;"><span>}
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span><span style="color:#000;font-weight:bold">const</span> sTargetUrl <span style="color:#000;font-weight:bold">=</span> getURLParam(<span style="color:#d14">&#34;target&#34;</span>);
</span></span><span style="display:flex;"><span><span style="color:#000;font-weight:bold">if</span> (validURL(sTargetUrl)) {
</span></span><span style="display:flex;"><span>	location.replace(sTargetUrl);
</span></span><span style="display:flex;"><span>}
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span><span style="color:#998;font-style:italic">// good: 制定重定向地址为固定值
</span></span></span><span style="display:flex;"><span><span style="color:#998;font-style:italic"></span><span style="color:#000;font-weight:bold">const</span> sTargetUrl <span style="color:#000;font-weight:bold">=</span> <span style="color:#d14">&#34;http://www.qq.com&#34;</span>;
</span></span><span style="display:flex;"><span>location.replace(sTargetUrl);
</span></span></code></pre></td></tr></table>
</div>
</div><p><a id="1.1.4"></a></p>
<h2 id="14-json解析动态执行">1.4 JSON解析/动态执行</h2>
<p><strong>1.4.1【必须】使用安全的JSON解析方式</strong></p>
<ul>
<li>应使用<code>JSON.parse()</code>解析JSON字符串。低版本浏览器，应使用安全的<a href="https://github.com/douglascrockford/JSON-js/blob/master/json2.js">Polyfill封装</a></li>
</ul>
<div class="highlight"><div style="background-color:#fff;-moz-tab-size:4;-o-tab-size:4;tab-size:4;">
<table style="border-spacing:0;padding:0;margin:0;border:0;"><tr><td style="vertical-align:top;padding:0;margin:0;border:0;">
<pre tabindex="0" style="background-color:#fff;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code><span style="white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 1
</span><span style="white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 2
</span><span style="white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 3
</span><span style="white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 4
</span><span style="white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 5
</span><span style="white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 6
</span><span style="white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 7
</span><span style="white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 8
</span><span style="white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 9
</span><span style="white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">10
</span><span style="white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">11
</span><span style="white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">12
</span><span style="white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">13
</span><span style="white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">14
</span><span style="white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">15
</span><span style="white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">16
</span></code></pre></td>
<td style="vertical-align:top;padding:0;margin:0;border:0;;width:100%">
<pre tabindex="0" style="background-color:#fff;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-javascript" data-lang="javascript"><span style="display:flex;"><span><span style="color:#998;font-style:italic">// bad: 直接调用eval解析json
</span></span></span><span style="display:flex;"><span><span style="color:#998;font-style:italic"></span><span style="color:#000;font-weight:bold">const</span> sUserInput <span style="color:#000;font-weight:bold">=</span> getURLParam(<span style="color:#d14">&#34;json_val&#34;</span>);
</span></span><span style="display:flex;"><span><span style="color:#000;font-weight:bold">const</span> jsonstr1 <span style="color:#000;font-weight:bold">=</span> <span style="color:#d14">`{&#34;name&#34;:&#34;a&#34;,&#34;company&#34;:&#34;b&#34;,&#34;value&#34;:&#34;</span><span style="color:#d14">${</span>sUserInput<span style="color:#d14">}</span><span style="color:#d14">&#34;}`</span>;
</span></span><span style="display:flex;"><span><span style="color:#000;font-weight:bold">const</span> json1 <span style="color:#000;font-weight:bold">=</span> <span style="color:#0086b3">eval</span>(<span style="color:#d14">`(</span><span style="color:#d14">${</span>jsonstr1<span style="color:#d14">}</span><span style="color:#d14">)`</span>);
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span><span style="color:#998;font-style:italic">// good: 使用JSON.parse解析
</span></span></span><span style="display:flex;"><span><span style="color:#998;font-style:italic"></span><span style="color:#000;font-weight:bold">const</span> sUserInput <span style="color:#000;font-weight:bold">=</span> getURLParam(<span style="color:#d14">&#34;json_val&#34;</span>);
</span></span><span style="display:flex;"><span>JSON.parse(sUserInput, (k, v) =&gt; {
</span></span><span style="display:flex;"><span>	<span style="color:#000;font-weight:bold">if</span> (k <span style="color:#000;font-weight:bold">===</span> <span style="color:#d14">&#34;&#34;</span>) <span style="color:#000;font-weight:bold">return</span> v;
</span></span><span style="display:flex;"><span>	<span style="color:#000;font-weight:bold">return</span> v <span style="color:#000;font-weight:bold">*</span> <span style="color:#099">2</span>;
</span></span><span style="display:flex;"><span>});
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span><span style="color:#998;font-style:italic">// good: 低版本浏览器，使用安全的Polyfill封装（基于eval）
</span></span></span><span style="display:flex;"><span><span style="color:#998;font-style:italic"></span><span style="color:#000;font-weight:bold">&lt;</span>script src<span style="color:#000;font-weight:bold">=</span><span style="color:#d14">&#34;https://github.com/douglascrockford/JSON-js/blob/master/json2.js&#34;</span><span style="color:#000;font-weight:bold">&gt;&lt;</span><span style="color:#a61717;background-color:#e3d2d2">/script&gt;;</span>
</span></span><span style="display:flex;"><span><span style="color:#000;font-weight:bold">const</span> sUserInput <span style="color:#000;font-weight:bold">=</span> getURLParam(<span style="color:#d14">&#34;json_val&#34;</span>);
</span></span><span style="display:flex;"><span>JSON.parse(sUserInput);
</span></span></code></pre></td></tr></table>
</div>
</div><p><a id="1.1.5"></a></p>
<h2 id="15-跨域通讯">1.5 跨域通讯</h2>
<p><strong>1.5.1【必须】使用安全的前端跨域通信方式</strong></p>
<ul>
<li>具有隔离登录态（如：p_skey）、涉及用户高敏感信息的业务（如：微信网页版、QQ空间、QQ邮箱、公众平台），禁止通过<code>document.domain</code>降域，实现前端跨域通讯，应使用postMessage替代。</li>
</ul>
<p><strong>1.5.2【必须】使用postMessage应限定Origin</strong></p>
<ul>
<li>
<p>在message事件监听回调中，应先使用<code>event.origin</code>校验来源，再执行具体操作。</p>
</li>
<li>
<p>校验来源时，应使用<code>===</code>判断，禁止使用<code>indexOf()</code></p>
</li>
</ul>
<div class="highlight"><div style="background-color:#fff;-moz-tab-size:4;-o-tab-size:4;tab-size:4;">
<table style="border-spacing:0;padding:0;margin:0;border:0;"><tr><td style="vertical-align:top;padding:0;margin:0;border:0;">
<pre tabindex="0" style="background-color:#fff;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code><span style="white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 1
</span><span style="white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 2
</span><span style="white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 3
</span><span style="white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 4
</span><span style="white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 5
</span><span style="white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 6
</span><span style="white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 7
</span><span style="white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 8
</span><span style="white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f"> 9
</span><span style="white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">10
</span><span style="white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">11
</span><span style="white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">12
</span><span style="white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">13
</span><span style="white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">14
</span><span style="white-space:pre;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">15
</span></code></pre></td>
<td style="vertical-align:top;padding:0;margin:0;border:0;;width:100%">
<pre tabindex="0" style="background-color:#fff;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-javascript" data-lang="javascript"><span style="display:flex;"><span><span style="color:#998;font-style:italic">// bad: 使用indexOf校验Origin值
</span></span></span><span style="display:flex;"><span><span style="color:#998;font-style:italic"></span><span style="color:#0086b3">window</span>.addEventListener(<span style="color:#d14">&#34;message&#34;</span>, (e) =&gt; {
</span></span><span style="display:flex;"><span>	<span style="color:#000;font-weight:bold">if</span> (<span style="color:#000;font-weight:bold">~</span>e.origin.indexOf(<span style="color:#d14">&#34;https://a.qq.com&#34;</span>)) {
</span></span><span style="display:flex;"><span>	<span style="color:#998;font-style:italic">// ...
</span></span></span><span style="display:flex;"><span><span style="color:#998;font-style:italic"></span>	} <span style="color:#000;font-weight:bold">else</span> {
</span></span><span style="display:flex;"><span>	<span style="color:#998;font-style:italic">// ...
</span></span></span><span style="display:flex;"><span><span style="color:#998;font-style:italic"></span>	}
</span></span><span style="display:flex;"><span>});
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span><span style="color:#998;font-style:italic">// good: 使用postMessage时，限定Origin，且使用===判断
</span></span></span><span style="display:flex;"><span><span style="color:#998;font-style:italic"></span><span style="color:#0086b3">window</span>.addEventListener(<span style="color:#d14">&#34;message&#34;</span>, (e) =&gt; {
</span></span><span style="display:flex;"><span>	<span style="color:#000;font-weight:bold">if</span> (e.origin <span style="color:#000;font-weight:bold">===</span> <span style="color:#d14">&#34;https://a.qq.com&#34;</span>) {
</span></span><span style="display:flex;"><span>	<span style="color:#998;font-style:italic">// ...
</span></span></span><span style="display:flex;"><span><span style="color:#998;font-style:italic"></span>	}
</span></span><span style="display:flex;"><span>});
</span></span></code></pre></td></tr></table>
</div>
</div><p><a id="1.2"></a></p>
<h1 id="ii-配置环境">II. 配置&amp;环境</h1>
<p><a id="1.2.1"></a></p>
<h2 id="21-敏感配置信息">2.1 敏感/配置信息</h2>
<p><strong>2.1.1【必须】禁止明文硬编码AK/SK</strong></p>
<ul>
<li>禁止前端页面的JS明文硬编码AK/SK类密钥，应封装成后台接口，AK/SK保存在后端配置中心或密钥管理系统</li>
</ul>
<p><a id="1.2.2"></a></p>
<h2 id="22-第三方组件资源">2.2 第三方组件/资源</h2>
<p><strong>2.2.1【必须】使用可信范围内的统计组件</strong></p>
<p><strong>2.2.2 【必须】禁止引入非可信来源的第三方JS</strong></p>
<p><a id="1.2.3"></a></p>
<h2 id="23-纵深安全防护">2.3 纵深安全防护</h2>
<p><strong>2.3.1【推荐】部署CSP，并启用严格模式</strong></p>

        </div>

        
<div class="post-archive">
    <ul class="post-copyright">
        <li><strong>原文作者：</strong><a rel="author" href="https://anttu.gitee.io/">Anttu</a></li>
        <li style="word-break:break-all"><strong>原文链接：</strong><a href="https://anttu.gitee.io/post/2021-10-07-safe_coding_js/">https://anttu.gitee.io/post/2021-10-07-safe_coding_js/</a></li>
        <li><strong>版权声明：</strong>本作品采用<a rel="license" href="https://creativecommons.org/licenses/by-nc-nd/4.0/">知识共享署名-非商业性使用-禁止演绎 4.0 国际许可协议</a>进行许可，非商业转载请注明出处（作者，原文链接），商业转载请联系作者获得授权。</li>
    </ul>
</div>
<br/>



        

<div class="post-archive">
    <h2>See Also</h2>
    <ul class="listing">
        
        <li><a href="/post/2021-09-30-safe_coding_java/">java编码安全</a></li>
        
        <li><a href="/post/2021-09-19-maven_verify/">maven校验依赖包CVE漏洞</a></li>
        
        <li><a href="/post/2021-08-10-jvm_dump_analyse/">jvm的大dump文件分析</a></li>
        
        <li><a href="/post/2021-07-15-maven_scope/">maven的scope参数</a></li>
        
        <li><a href="/post/2021-06-05-python_faker/">python工具-faker测试数据生成器</a></li>
        
    </ul>
</div>


        <div class="post-meta meta-tags">
            
            没有标签
            
        </div>
    </article>
    
    

    
    
    <div class="post bg-white">
      <script src="https://utteranc.es/client.js"
            repo= "anTtutu/anTtutu.github.io"
            issue-term="pathname"
            theme="github-light"
            crossorigin="anonymous"
            async>
      </script>
    </div>
    
    
    
</div>

                    <footer id="footer">
    <div>
        &copy; 2025 <a href="https://anttu.gitee.io/">Anttu&#39;s Blog By Anttu</a>
        
    </div>
    <br />
    <div>
        <div class="github-badge">
            <a href="https://gohugo.io/" target="_black" rel="nofollow"><span class="badge-subject">Powered by</span><span class="badge-value bg-blue">Hugo</span></a>
        </div>
        
        <div class="github-badge">
            <a href="https://github.com/flysnow-org/maupassant-hugo" target="_black"><span class="badge-subject">Theme</span><span class="badge-value bg-yellowgreen">Maupassant</span></a>
        </div>
    </div>
</footer>


    
    
    <script type="text/javascript">
        window.MathJax = {
            tex2jax: {
                inlineMath: [['$', '$']],
                processEscapes: true
                }
            };
    </script>
    <script src='//cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js?config=TeX-MML-AM_CHTML' async></script>

<a id="rocket" href="#top"></a>
<script type="text/javascript" src='/js/totop.js?v=0.0.0' async=""></script>
<style type="text/css">
div.highlight {
    position: relative;
    margin: 1em 0px;
}

.copy-code {
    display: none;
    position: absolute;
    top: 4px;
    right: 4px;
    color: rgba(255, 255, 255, 0.8);
    background: rgba(78, 78, 78, 0.8);
    border-radius: var(--radius);
    padding: 0 5px;
    font: inherit;
    user-select: none;
    cursor: pointer;
    border: 0;
    --radius: 8px;
}

div.highlight:hover .copy-code,pre:hover .copy-code {
    display: block;
}

</style>
<script>
    document.querySelectorAll('pre > code').forEach((codeblock) => {
        const container = codeblock.parentNode.parentNode;

        const copybutton = document.createElement('button');
        copybutton.classList.add('copy-code');
        copybutton.innerHTML = 'copy';

        function copyingDone() {
            copybutton.innerHTML = 'copied!';
            setTimeout(() => {
                copybutton.innerHTML = 'copy';
            }, 2000);
        }

        copybutton.addEventListener('click', (cb) => {
            if ('clipboard' in navigator) {
                navigator.clipboard.writeText(codeblock.textContent);
                copyingDone();
                return;
            }

            const range = document.createRange();
            range.selectNodeContents(codeblock);
            const selection = window.getSelection();
            selection.removeAllRanges();
            selection.addRange(range);
            try {
                document.execCommand('copy');
                copyingDone();
            } catch (e) { };
            selection.removeRange(range);
        });

        if (container.classList.contains("highlight")) {
            container.appendChild(copybutton);
        } else if (container.parentNode.firstChild == container) {
            
        } else if (codeblock.parentNode.parentNode.parentNode.parentNode.parentNode.nodeName == "TABLE") {
            
            codeblock.parentNode.parentNode.parentNode.parentNode.parentNode.appendChild(copybutton);
        } else {
            
            codeblock.parentNode.appendChild(copybutton);
        }
    });
</script>


    <script type="text/javascript" src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js" async></script>




    <script src='/js/asciinema-player.js'></script>

                </div>

                <div id="secondary">
    <section class="widget">
        <form id="search" action='https://anttu.gitee.io/search' method="get" accept-charset="utf-8" target="_blank" _lpchecked="1">
      
      <input type="text" name="q" maxlength="20" placeholder="Search">
      <input type="hidden" name="sitesearch" value="https://anttu.gitee.io/">
      <button type="submit" class="submit icon-search"></button>
</form>
    </section>
    
    <section class="widget">
        <h3 class="widget-title">最近文章</h3>
<ul class="widget-list">
    
    <li>
        <a href="https://anttu.gitee.io/post/2025-02-13-mvnd/" title="mvnd结合idea使用" target="_blank">mvnd结合idea使用</a>
    </li>
    
    <li>
        <a href="https://anttu.gitee.io/post/2024-04-15-postgresql/" title="postgresql数据库常用记录" target="_blank">postgresql数据库常用记录</a>
    </li>
    
    <li>
        <a href="https://anttu.gitee.io/post/2023-06-16-miner_virus_5/" title="挖矿病毒5-私有云机房挖矿病毒定位" target="_blank">挖矿病毒5-私有云机房挖矿病毒定位</a>
    </li>
    
    <li>
        <a href="https://anttu.gitee.io/post/2022-12-26-covid-19/" title="羊了" target="_blank">羊了</a>
    </li>
    
    <li>
        <a href="https://anttu.gitee.io/post/2022-12-19-git_delete_history/" title="git删除历史提交记录" target="_blank">git删除历史提交记录</a>
    </li>
    
    <li>
        <a href="https://anttu.gitee.io/post/2022-11-28-python_muilt_version/" title="python多版本管理工具" target="_blank">python多版本管理工具</a>
    </li>
    
    <li>
        <a href="https://anttu.gitee.io/post/2022-11-22-springboot_start_failed/" title="springboot常见兼容性错误" target="_blank">springboot常见兼容性错误</a>
    </li>
    
    <li>
        <a href="https://anttu.gitee.io/post/2022-11-14-docker_port/" title="docker修改运行的容器端口" target="_blank">docker修改运行的容器端口</a>
    </li>
    
    <li>
        <a href="https://anttu.gitee.io/post/2022-11-10-go_muilt_version/" title="go多版本管理工具" target="_blank">go多版本管理工具</a>
    </li>
    
    <li>
        <a href="https://anttu.gitee.io/post/2022-10-27-jenkins_reset/" title="jenkins的admin密码忘记了如何重置" target="_blank">jenkins的admin密码忘记了如何重置</a>
    </li>
    
</ul>
    </section>

    

    <section class="widget">
        <h3 class="widget-title"><a href='/categories/'>分类</a></h3>
<ul class="widget-list">
    
    <li><a href="https://anttu.gitee.io/categories/about/">about (1)</a></li>
    
    <li><a href="https://anttu.gitee.io/categories/android/">android (2)</a></li>
    
    <li><a href="https://anttu.gitee.io/categories/app/">app (1)</a></li>
    
    <li><a href="https://anttu.gitee.io/categories/aria2/">aria2 (1)</a></li>
    
    <li><a href="https://anttu.gitee.io/categories/arm64/">arm64 (1)</a></li>
    
    <li><a href="https://anttu.gitee.io/categories/arthas/">arthas (1)</a></li>
    
    <li><a href="https://anttu.gitee.io/categories/awr/">awr (1)</a></li>
    
    <li><a href="https://anttu.gitee.io/categories/backend_execute/">backend_execute (1)</a></li>
    
    <li><a href="https://anttu.gitee.io/categories/backup/">backup (1)</a></li>
    
    <li><a href="https://anttu.gitee.io/categories/blog/">blog (3)</a></li>
    
    <li><a href="https://anttu.gitee.io/categories/bug/">bug (1)</a></li>
    
    <li><a href="https://anttu.gitee.io/categories/build/">build (1)</a></li>
    
    <li><a href="https://anttu.gitee.io/categories/cache/">cache (1)</a></li>
    
    <li><a href="https://anttu.gitee.io/categories/caffeine/">caffeine (1)</a></li>
    
    <li><a href="https://anttu.gitee.io/categories/captcha/">captcha (1)</a></li>
    
    <li><a href="https://anttu.gitee.io/categories/check/">check (5)</a></li>
    
    <li><a href="https://anttu.gitee.io/categories/clean/">clean (1)</a></li>
    
    <li><a href="https://anttu.gitee.io/categories/cli/">cli (1)</a></li>
    
    <li><a href="https://anttu.gitee.io/categories/cluster/">cluster (4)</a></li>
    
    <li><a href="https://anttu.gitee.io/categories/covid-19/">covid-19 (1)</a></li>
    
    <li><a href="https://anttu.gitee.io/categories/cve/">cve (1)</a></li>
    
    <li><a href="https://anttu.gitee.io/categories/cygwin/">cygwin (1)</a></li>
    
    <li><a href="https://anttu.gitee.io/categories/dataguard/">dataguard (1)</a></li>
    
    <li><a href="https://anttu.gitee.io/categories/db/">db (1)</a></li>
    
    <li><a href="https://anttu.gitee.io/categories/deepfacelab/">deepfacelab (1)</a></li>
    
    <li><a href="https://anttu.gitee.io/categories/devops/">devops (1)</a></li>
    
    <li><a href="https://anttu.gitee.io/categories/docker/">docker (5)</a></li>
    
    <li><a href="https://anttu.gitee.io/categories/dockerfile/">dockerfile (1)</a></li>
    
    <li><a href="https://anttu.gitee.io/categories/dos/">dos (1)</a></li>
    
    <li><a href="https://anttu.gitee.io/categories/dump/">dump (1)</a></li>
    
    <li><a href="https://anttu.gitee.io/categories/eclipse/">eclipse (2)</a></li>
    
    <li><a href="https://anttu.gitee.io/categories/explain/">explain (1)</a></li>
    
    <li><a href="https://anttu.gitee.io/categories/faker/">faker (1)</a></li>
    
    <li><a href="https://anttu.gitee.io/categories/gcc/">gcc (1)</a></li>
    
    <li><a href="https://anttu.gitee.io/categories/git/">git (2)</a></li>
    
    <li><a href="https://anttu.gitee.io/categories/gitment/">gitment (1)</a></li>
    
    <li><a href="https://anttu.gitee.io/categories/gitpages/">gitpages (2)</a></li>
    
    <li><a href="https://anttu.gitee.io/categories/go/">go (5)</a></li>
    
    <li><a href="https://anttu.gitee.io/categories/h2/">h2 (1)</a></li>
    
    <li><a href="https://anttu.gitee.io/categories/h5/">h5 (1)</a></li>
    
    <li><a href="https://anttu.gitee.io/categories/ha/">ha (4)</a></li>
    
    <li><a href="https://anttu.gitee.io/categories/http/">http (1)</a></li>
    
    <li><a href="https://anttu.gitee.io/categories/hugo/">hugo (1)</a></li>
    
    <li><a href="https://anttu.gitee.io/categories/id/">id (1)</a></li>
    
    <li><a href="https://anttu.gitee.io/categories/idea/">idea (1)</a></li>
    
    <li><a href="https://anttu.gitee.io/categories/java/">java (24)</a></li>
    
    <li><a href="https://anttu.gitee.io/categories/jekyll/">jekyll (2)</a></li>
    
    <li><a href="https://anttu.gitee.io/categories/jenkins/">jenkins (1)</a></li>
    
    <li><a href="https://anttu.gitee.io/categories/jrebel/">jrebel (1)</a></li>
    
    <li><a href="https://anttu.gitee.io/categories/js/">js (1)</a></li>
    
    <li><a href="https://anttu.gitee.io/categories/jsr/">jsr (1)</a></li>
    
    <li><a href="https://anttu.gitee.io/categories/jvm/">jvm (1)</a></li>
    
    <li><a href="https://anttu.gitee.io/categories/kafka/">kafka (1)</a></li>
    
    <li><a href="https://anttu.gitee.io/categories/kali/">kali (1)</a></li>
    
    <li><a href="https://anttu.gitee.io/categories/kenlm/">kenlm (1)</a></li>
    
    <li><a href="https://anttu.gitee.io/categories/linux/">linux (22)</a></li>
    
    <li><a href="https://anttu.gitee.io/categories/log/">log (1)</a></li>
    
    <li><a href="https://anttu.gitee.io/categories/log4j/">log4j (2)</a></li>
    
    <li><a href="https://anttu.gitee.io/categories/lombok/">lombok (1)</a></li>
    
    <li><a href="https://anttu.gitee.io/categories/mac/">mac (5)</a></li>
    
    <li><a href="https://anttu.gitee.io/categories/matplotlib/">matplotlib (1)</a></li>
    
    <li><a href="https://anttu.gitee.io/categories/maven/">maven (3)</a></li>
    
    <li><a href="https://anttu.gitee.io/categories/mine/">mine (5)</a></li>
    
    <li><a href="https://anttu.gitee.io/categories/mongodb/">mongodb (1)</a></li>
    
    <li><a href="https://anttu.gitee.io/categories/mvnd/">mvnd (1)</a></li>
    
    <li><a href="https://anttu.gitee.io/categories/mysql/">mysql (5)</a></li>
    
    <li><a href="https://anttu.gitee.io/categories/nginx/">nginx (1)</a></li>
    
    <li><a href="https://anttu.gitee.io/categories/nmap/">nmap (1)</a></li>
    
    <li><a href="https://anttu.gitee.io/categories/oom/">oom (1)</a></li>
    
    <li><a href="https://anttu.gitee.io/categories/oracle/">oracle (3)</a></li>
    
    <li><a href="https://anttu.gitee.io/categories/orangePi/">orangePi (1)</a></li>
    
    <li><a href="https://anttu.gitee.io/categories/package/">package (1)</a></li>
    
    <li><a href="https://anttu.gitee.io/categories/pandas/">pandas (1)</a></li>
    
    <li><a href="https://anttu.gitee.io/categories/pg/">pg (1)</a></li>
    
    <li><a href="https://anttu.gitee.io/categories/port/">port (1)</a></li>
    
    <li><a href="https://anttu.gitee.io/categories/postgresql/">postgresql (1)</a></li>
    
    <li><a href="https://anttu.gitee.io/categories/python/">python (8)</a></li>
    
    <li><a href="https://anttu.gitee.io/categories/rec/">rec (1)</a></li>
    
    <li><a href="https://anttu.gitee.io/categories/redis/">redis (3)</a></li>
    
    <li><a href="https://anttu.gitee.io/categories/regexp/">regexp (1)</a></li>
    
    <li><a href="https://anttu.gitee.io/categories/safe/">safe (5)</a></li>
    
    <li><a href="https://anttu.gitee.io/categories/sdk/">sdk (3)</a></li>
    
    <li><a href="https://anttu.gitee.io/categories/shell/">shell (3)</a></li>
    
    <li><a href="https://anttu.gitee.io/categories/split/">split (1)</a></li>
    
    <li><a href="https://anttu.gitee.io/categories/springboot/">springboot (4)</a></li>
    
    <li><a href="https://anttu.gitee.io/categories/springcloud/">springcloud (1)</a></li>
    
    <li><a href="https://anttu.gitee.io/categories/sqlmap/">sqlmap (1)</a></li>
    
    <li><a href="https://anttu.gitee.io/categories/ssd/">ssd (1)</a></li>
    
    <li><a href="https://anttu.gitee.io/categories/tcp/">tcp (1)</a></li>
    
    <li><a href="https://anttu.gitee.io/categories/termux/">termux (2)</a></li>
    
    <li><a href="https://anttu.gitee.io/categories/test/">test (1)</a></li>
    
    <li><a href="https://anttu.gitee.io/categories/testing/">testing (1)</a></li>
    
    <li><a href="https://anttu.gitee.io/categories/union_id/">union_id (1)</a></li>
    
    <li><a href="https://anttu.gitee.io/categories/vcs/">vcs (7)</a></li>
    
    <li><a href="https://anttu.gitee.io/categories/virus/">virus (5)</a></li>
    
    <li><a href="https://anttu.gitee.io/categories/vxvm/">vxvm (3)</a></li>
    
    <li><a href="https://anttu.gitee.io/categories/win10/">win10 (6)</a></li>
    
    <li><a href="https://anttu.gitee.io/categories/xrebel/">xrebel (1)</a></li>
    
    <li><a href="https://anttu.gitee.io/categories/ynote/">ynote (1)</a></li>
    
    <li><a href="https://anttu.gitee.io/categories/zk/">zk (1)</a></li>
    
    <li><a href="https://anttu.gitee.io/categories/zookeeper/">zookeeper (1)</a></li>
    
    <li><a href="https://anttu.gitee.io/categories/%E5%89%8D%E7%AB%AF/">前端 (1)</a></li>
    
    <li><a href="https://anttu.gitee.io/categories/%E5%AE%B9%E7%81%BE/">容灾 (1)</a></li>
    
</ul>
    </section>

    <section class="widget">
        <h3 class="widget-title"><a href='/tags/'>标签</a></h3>
<div class="tagcloud">
    
    <a href="https://anttu.gitee.io/tags/about/">about</a>
    
    <a href="https://anttu.gitee.io/tags/android/">android</a>
    
    <a href="https://anttu.gitee.io/tags/app/">app</a>
    
    <a href="https://anttu.gitee.io/tags/aria2/">aria2</a>
    
    <a href="https://anttu.gitee.io/tags/arm64/">arm64</a>
    
    <a href="https://anttu.gitee.io/tags/awr/">awr</a>
    
    <a href="https://anttu.gitee.io/tags/backup/">backup</a>
    
    <a href="https://anttu.gitee.io/tags/blog/">blog</a>
    
    <a href="https://anttu.gitee.io/tags/bug/">bug</a>
    
    <a href="https://anttu.gitee.io/tags/build/">build</a>
    
    <a href="https://anttu.gitee.io/tags/captcha/">captcha</a>
    
    <a href="https://anttu.gitee.io/tags/check/">check</a>
    
    <a href="https://anttu.gitee.io/tags/cluster/">cluster</a>
    
    <a href="https://anttu.gitee.io/tags/cygwin/">cygwin</a>
    
    <a href="https://anttu.gitee.io/tags/dataguard/">dataguard</a>
    
    <a href="https://anttu.gitee.io/tags/deepfacelab/">deepfacelab</a>
    
    <a href="https://anttu.gitee.io/tags/dos/">dos</a>
    
    <a href="https://anttu.gitee.io/tags/eclipse/">eclipse</a>
    
    <a href="https://anttu.gitee.io/tags/explain/">explain</a>
    
    <a href="https://anttu.gitee.io/tags/gcc/">gcc</a>
    
    <a href="https://anttu.gitee.io/tags/gitment/">gitment</a>
    
    <a href="https://anttu.gitee.io/tags/gitpages/">gitpages</a>
    
    <a href="https://anttu.gitee.io/tags/go/">go</a>
    
    <a href="https://anttu.gitee.io/tags/h2/">h2</a>
    
    <a href="https://anttu.gitee.io/tags/h5/">h5</a>
    
    <a href="https://anttu.gitee.io/tags/ha/">ha</a>
    
    <a href="https://anttu.gitee.io/tags/http/">http</a>
    
    <a href="https://anttu.gitee.io/tags/hugo/">hugo</a>
    
    <a href="https://anttu.gitee.io/tags/java/">java</a>
    
    <a href="https://anttu.gitee.io/tags/jekyll/">jekyll</a>
    
    <a href="https://anttu.gitee.io/tags/jrebel/">jrebel</a>
    
    <a href="https://anttu.gitee.io/tags/js/">js</a>
    
    <a href="https://anttu.gitee.io/tags/jsr/">jsr</a>
    
    <a href="https://anttu.gitee.io/tags/kafka/">kafka</a>
    
    <a href="https://anttu.gitee.io/tags/kali/">kali</a>
    
    <a href="https://anttu.gitee.io/tags/kenlm/">kenlm</a>
    
    <a href="https://anttu.gitee.io/tags/linux/">linux</a>
    
    <a href="https://anttu.gitee.io/tags/log4j/">log4j</a>
    
    <a href="https://anttu.gitee.io/tags/mac/">mac</a>
    
    <a href="https://anttu.gitee.io/tags/mine/">mine</a>
    
    <a href="https://anttu.gitee.io/tags/mongodb/">mongodb</a>
    
    <a href="https://anttu.gitee.io/tags/mysql/">mysql</a>
    
    <a href="https://anttu.gitee.io/tags/nginx/">nginx</a>
    
    <a href="https://anttu.gitee.io/tags/oom/">oom</a>
    
    <a href="https://anttu.gitee.io/tags/oracle/">oracle</a>
    
    <a href="https://anttu.gitee.io/tags/orangePi/">orangePi</a>
    
    <a href="https://anttu.gitee.io/tags/python/">python</a>
    
    <a href="https://anttu.gitee.io/tags/rec/">rec</a>
    
    <a href="https://anttu.gitee.io/tags/redis/">redis</a>
    
    <a href="https://anttu.gitee.io/tags/safe/">safe</a>
    
    <a href="https://anttu.gitee.io/tags/shell/">shell</a>
    
    <a href="https://anttu.gitee.io/tags/springboot/">springboot</a>
    
    <a href="https://anttu.gitee.io/tags/sqlmap/">sqlmap</a>
    
    <a href="https://anttu.gitee.io/tags/ssd/">ssd</a>
    
    <a href="https://anttu.gitee.io/tags/tcp/">tcp</a>
    
    <a href="https://anttu.gitee.io/tags/termux/">termux</a>
    
    <a href="https://anttu.gitee.io/tags/union_id/">union_id</a>
    
    <a href="https://anttu.gitee.io/tags/vcs/">vcs</a>
    
    <a href="https://anttu.gitee.io/tags/virus/">virus</a>
    
    <a href="https://anttu.gitee.io/tags/vxvm/">vxvm</a>
    
    <a href="https://anttu.gitee.io/tags/win10/">win10</a>
    
    <a href="https://anttu.gitee.io/tags/xrebel/">xrebel</a>
    
    <a href="https://anttu.gitee.io/tags/ynote/">ynote</a>
    
    <a href="https://anttu.gitee.io/tags/zk/">zk</a>
    
    <a href="https://anttu.gitee.io/tags/zookeeper/">zookeeper</a>
    
    <a href="https://anttu.gitee.io/tags/%E5%AE%B9%E7%81%BE/">容灾</a>
    
</div>
    </section>

    

    <section class="widget">
        <h3 class="widget-title">其它</h3>
        <ul class="widget-list">
            <li><a href="https://anttu.gitee.io/index.xml">文章 RSS</a></li>
        </ul>
    </section>
</div>
            </div>
        </div>
    </div>
</body>

</html>